<template>
  <view>
    <block v-if="style === 'glass'">
      <view class="tabbar footerfixed dd-glass" style="border-radius: 100rpx;">
        <view class="action">
          <navigator url="/pages/index/index" hover-class="none" open-type="reLaunch"
                     :class="[clickClass('/pages/index/index')]">
            <view class="bar-icon">
              <view class="tn-icon-home ">
              </view>
            </view>
            <view class="">首页</view>
          </navigator>
        </view>

        <view class="action">
          <view @click="chuandao"  hover-class="none" open-type="reLaunch"
                     :class="[clickClass('/pages/manyCourse/manyCourse')]">
            <view class="bar-icon">
              <view class="tn-icon-edit-form ">
              </view>
            </view>
            <!-- <view class="">模拟考试</view> -->
			<view class="">传道</view>
          </view>
        </view>

        <view class="action">
          <navigator url="/pages/index/news-list" hover-class="none" open-type="reLaunch"
                     :class="[clickClass('/pages/index/news-list')]">
            <view class="bar-icon">
              <view class="tn-icon-inventory ">
              </view>
            </view>
            <!-- <view class="">学习动态</view> -->
			<view class="">授业</view>
          </navigator>
        </view>
        <!-- <view class="action">
          <navigator url="/pages/search/index" hover-class="none" open-type="reLaunch" :class="[clickClass('/pages/search/index')]">
            <view class="bar-icon">
              <view class="tn-icon-search ">
              </view>
            </view>
            <view class="">试题查询</view>
          </navigator>
        </view> -->

       <!-- <view class="action">
          <navigator url="/pages/room/index" hover-class="none" open-type="reLaunch"
                     :class="[clickClass('/pages/room/index')]">
            <view class="bar-icon">
              <view class="tn-icon-menu-list ">
              </view>
            </view>

			<view class="">解惑</view>
          </navigator>
        </view> -->


        <view class="action">
          <view @click="me" hover-class="none" open-type="reLaunch"
                     :class="[clickClass('/pages/mine/mine')]">
            <view class="bar-icon">
              <view class="tn-icon-my">
              </view>
            </view>
            <view class="">我的</view>
          </view>
        </view>
      </view>
    </block>


    <block v-if="style === 'simple'">
      <view style="height: 120rpx;"></view>
      <view class="disFix index-bottom radius20">
        <navigator url="/pages/index/index" hover-class="none" open-type="reLaunch">
          <image :src="route == '/pages/index/index' ? '/static/tabbar/index1.png' : '/static/tabbar/index.png'">
          </image>
          <text :style="'color:' + (route == '/pages/index/index' ? '#5677fc' : '#9b9b9b')">首页</text>
        </navigator>

        <!-- <navigator url="/pages/paper/index" hover-class="none" open-type="reLaunch">
          <image
              :src="route == '/pages/paper/index' ? '/static/tabbar/kaoshi1.png' : '/static/tabbar/kaoshi.png'">
          </image>
          <text :style="'color:' + (route == '/pages/paper/index' ? '#5677fc' : '#9b9b9b')">模拟考试</text>
        </navigator>

        <navigator class="index-b-center" url="/pages/index/news-list" hover-class="none" open-type="reLaunch">
          <image
              :src="route == '/pages/index/news-list' ? '/static/tabbar/zixun1.png' : '/static/tabbar/zixun.png'">
          </image>
          <text :style="'color:' + (route == '/pages/index/news-list' ? '#5677fc' : '#9b9b9b')">学习说明</text>
        </navigator>
        <navigator url="/pages/room/index" hover-class="none" open-type="reLaunch">
          <image :src="route == '/pages/room/index' ? '/static/tabbar/tiku1.png' : '/static/tabbar/tiku.png'">
          </image>
          <text :style="'color:' + (route == '/pages/room/index' ? '#5677fc' : '#9b9b9b')">考场列表</text>
        </navigator> -->

        <view @click="me" hover-class="none" open-type="reLaunch">
          <image :src="route == '/pages/mine/mine' ? '/pages/mine/mine' : '/static/tabbar/user.png'">
          </image>
          <text :style="'color:' + (route == '/pages/mine/mine' ? '#5677fc' : '#9b9b9b')">我的</text>
        </view>
      </view>
    </block>


  </view>
</template>

<script>
export default {
  name: 'tabbar',
  props: {
    // 样式风格
    theme: {
      type: String,
      default: 'glass'
    },
  },
  data() {
    return {
      navbar: false,
      route: '',
      style: 'glass',
      page: null,
    };
  },
  watch: {
    /**
     * 监听user
     * @param value
     */
    theme(value) {
      if (value && value != undefined) {
        this.style = value
      }
    },
  },
  mounted() {
    var that = this;
    var pages = getCurrentPages();
    var currentPage = pages[pages.length - 1];
    const url = currentPage.route;
    const options = currentPage.options;
    let urlWithArgs = `/${url}?`;
    for (let key in options) {
      const value = options[key];
      urlWithArgs += `${key}=${value}&`;
    }
    that.route = urlWithArgs.substring(0, urlWithArgs.length - 1);

    // tabbar风格
    this.page = uni.getStorageSync('page')
    if (this.page?.page_tabbar_style) {
      this.style = this.page.page_tabbar_style
    }
    // console.log('tabbar style', this.style)
  },
  methods: {
	  chuandao(){
		 uni.reLaunch({
		 	url:"/pages/manyCourse/manyCourse"
		 })
		 uni.hideHomeButton()
	  },
	  me(){
		  uni.reLaunch({
		  	url:"/pages/mine/mine"
		  })
		  uni.hideHomeButton()
	  },
    // 选中样式
    clickClass(url) {
      return this.route == url ? 'text-primary' : 'tn-color-grey'
      // return this.route == url ? 'tn-color-grey--dark' : 'tn-color-grey'
    },
  }
};
</script>

<style>
.page {
  background: transparent;
}

button {
  overflow: inherit;
}

.disFix {
  display: flex;
  justify-content: space-between;
  z-index: 999;
}

.index-bottom {
  position: fixed;
  /* left: 0;
  bottom: 1;
  width: 100%; */
  height: 90rpx;
  background: #ffffff;
  box-shadow: 0 0 2px 0 rgba(134, 133, 133, 0.5);
  font-size: 0;
  box-sizing: border-box;
  /* padding-bottom: 0;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom); */

  bottom: 30rpx;
  width: 95%;
  position: fixed;
  margin: 0 auto;
  left: 0;
  right: 0;
}

.index-bottom > navigator,
.index-bottom > view,
.index-bottom > button {
  /* width: 20%; */
  flex: 1;
  display: inline-block;
  text-align: center;
}

.index-bottom > button image {
  display: block;
}

.index-bottom > button {
  border-radius: 0px;
  padding: 0px;
  line-height: 15px;
  background: transparent;
  font-size: 20rpx;
  margin: 0 auto;
}

.index-bottom > button::after {
  border: none;
}

.index-bottom text {
  font-size: 20rpx;
}

.index-bottom image {
  display: block;
  width: 38rpx;
  height: 38rpx;
  margin: 14rpx auto 6rpx;
}

.index-b-center {
  position: relative;
  width: 90rpx;
  height: 90rpx;
  margin: -40rpx 0 0;
}

.index-bottom .index-b-center image {
  width: 76rpx;
  height: 76rpx;
}


/* 底部tabbar 毛玻璃风格 start*/
.footerfixed {
  position: fixed;
  // margin: 20rpx;
  margin: 40rpx 30rpx;
  width: 690rpx;
  bottom: calc(env(safe-area-inset-bottom) / 2);
  z-index: 999;
  background-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
}

.tabbar {
  display: flex;
  align-items: center;
  min-height: 110rpx;
  justify-content: space-between;
  padding: 0;
  height: calc(110rpx + env(safe-area-inset-bottom) / 2);
  // padding-bottom: calc(env(safe-area-inset-bottom) / 2);
}

.tabbar .action {
  font-size: 22rpx;
  position: relative;
  flex: 1;
  text-align: center;
  padding: 0;
  display: block;
  height: auto;
  line-height: 1;
  margin: 0;
  overflow: initial;
}

.tabbar .action .bar-icon {
  width: 100rpx;
  position: relative;
  display: block;
  height: auto;
  margin: 0 auto 10rpx;
  text-align: center;
  font-size: 42rpx;
}

.tabbar .action .bar-icon image {
  width: 50rpx;
  height: 50rpx;
  display: inline-block;
}

/* 毛玻璃*/
.dd-glass {
  width: 690rpx;
  backdrop-filter: blur(20rpx);
  -webkit-backdrop-filter: blur(20rpx);
}
</style>
